import React, { Component } from "react";
import { Breadcrumb, Button, Card, List, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import '../Grzl/Grzl.css'

const Item = List.Item

const fileList = [
    {
        uid: '-1',
        name: '头像',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
];

const props = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    listType: 'picture',
    defaultFileList: [...fileList],
};

class Grzl extends Component {

    render() {

        return (
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        {/* <a href="">我的</a> */}
                        我的
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>个人资料</Breadcrumb.Item>
                </Breadcrumb>
                <div className="xiahuaxian1"></div>
                <div className="xiahuaxian">个人资料</div>
                <div className="xiahuaxian1"></div>

                <Card className="detail">
                    <List>
                        <Item>
                            <span className="left">姓名 :</span>
                            <span className="right">张学友</span>
                        </Item>
                        <Item>
                            <span className="left">部门 :</span>
                            <span className="right">编辑部</span>
                        </Item>
                        <Item>
                            <span className="left">角色 :</span>
                            <span className="right">主编</span>
                        </Item>
                        <Item>
                            <span className="left">头像 :</span>
                            <span className="right">
                                <div className="touxiangcd">
                                    <Upload {...props}>
                                         <Button className="touxiangbk">
                                             <UploadOutlined />上传头像
                                         </Button>
                                    </Upload>
                                    
                                </div>
                            </span>
                        </Item>
                        <Item>
                            <span className="left">电话 :</span>
                            <span className="right">18888888888</span>
                        </Item>
                        <Item>
                            <span className="left">邮箱 :</span>
                            <span className="right">88888888@qq.com</span>
                        </Item>
                    </List>
                </Card>
                <Button className="btn1" type="primary">保存</Button>
            </div>
        )
    }
}
export default Grzl;